<template>
	<Layout class="p-5 bg-white">
		<Form :label-width="80">
			<FormItem class="w-50" label="编号">
				<label>{{adv.advId}}</label>
			</FormItem>
			
			<FormItem class="w-50" label="原图片">
				<img v-if="image.url" 
				style="width: 50px; height: 50px; border-radius: 25px;" :src="'https://'+image.url" />
				<span v-else>无</span>
			</FormItem>
			
			
			<FormItem class="w-50" label="修改图片">
				<div class="d-flex flex-row">
					<label style="line-height: 30px;" class="ivu-btn ivu-btn-default ml-1" for="cover">选择文件</label>
					<input @change="fileChange($event,coverFile)" id="cover" style="display: none;" type="file"></input>
				</div>
				
				<div class="d-flex flex-row mt-2" v-if="!coverFile.url">
					<img v-if="image.url" class="w-50" :src="'https://'+image.url"  />
				</div>
				<div class="d-flex flex-row mt-2" v-if="coverFile.url">
					<img v-if="coverFile.url" class="w-50" :src="coverFile.url"  />
				</div>
			</FormItem>
			
			
			<FormItem class="w-50" label="广告状态">
				<i-switch v-model="adv.statu"></i-switch>
			</FormItem>
			
			<FormItem class="text-right">
				<Button @click="submit" type="primary">修改并提交</Button>
				<Button @click="cancel" class="ml-2">取消</Button>
			</FormItem>
		</Form>
	</Layout>
</template>

<script>
	
	export default {
		
		data() {
			return {
				adv: {
					advId: "",
					imgId: "",
					statu: "",
				},
				
				image: {
					imgId: "",
					url: "",
					statu: "",
					dFlg: ""
				},
				coverFile: {
					name: "",
					file: undefined,
					url:""
				},
				
			}
		},
		methods: {
			fileChange: function(e,imgItem) {
				
				
				imgItem.file = e.target.files[0];
				imgItem.name = imgItem.file.name;
				
				let reader = new FileReader();
				reader.onloadend = function() {
					imgItem.url = this.result;
					this.url = this.result;
				}
				reader.readAsDataURL(imgItem.file);
				imgItem.onProgress = this.onProgress;
				console.log(this.url);
			},
			
			onProgress: function(pData) {
				console.log(pData);
			},
			
			
			submit: function() {
				let self = this;
				
				
				if (self.coverFile.url == ""){
					self.http.put({
						url: "/adv/info",
						param: {
							
							advId:self.adv.advId,
							statu: self.adv.statu,
							imgId:self.adv.imgId,
						}
					}).then(data => {
						self.message.info("广告状态更改成功，请刷新广告列表页面");
						self.$tabs.close();
						
						
						
						
					});
				}else{
					this.common.submitFile(self.coverFile).then(function(res) {
						self.coverFile.url = res.Location;
						self.http.put({
							url: "/adv/info",
							param: {
								
								advId:self.adv.advId,
								statu: self.adv.statu,
								url: self.coverFile.url,
								imgId: self.adv.imgId,
								imgStatu: self.image.statu,
							}
						}).then(data => {
							self.message.info("更改成功");
							self.$tabs.close();
							
							
							
						});
					}).catch(function(err) {
						console.log(err)
						self.message.error("修改图片失败，取消修改");
					});
				}
				
			},
			
			
			
			
			cancel: function() {
				this.$tabs.close();
			},
			init: function() {
				let self = this;
				self.http.get({
					url: "/adv/info",
					param: {
						advId:self.adv.advId,
						statu:self.adv.statu,
					}
				}).then(data => {
					
					self.adv.statu = data.advInfo.statu,
					self.adv.advId = data.advInfo.advId;
					self.image.url = data.imageInfo.url;
					self.adv.imgId = data.advInfo.imgId;
					
				});
				
				}
			},
			
			created: function(){
				this.adv.advId = this.$route.query.advId;
				this.init();
				
			}
		}
		
	
</script>